
<!DOCTYPE html>
<html lang="en">
<head>

<!-- META TAGS -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
<meta name="author" content="SmartBox">

<!-- TITLE -->
<title>SmartBox | Bootstrap3 Admin Dashboard Template</title>

<!-- FAVICON -->
<link rel="shortcut icon" href="assets/images/favicon.png">

<!-- STYLESHEETS -->
<link rel="stylesheet" href="assets/plugins/morris/morris.css">
<link rel="stylesheet" href="assets/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="assets/css/core.css" type="text/css" />
<link rel="stylesheet" href="assets/css/components.css" type="text/css" />
<link rel="stylesheet" href="assets/css/icons.css" type="text/css" />
<link rel="stylesheet" href="assets/css/pages.css" type="text/css" />
<link rel="stylesheet" href="assets/css/responsive.css" type="text/css" />
<link rel="stylesheet" href="assets/css/font-awesome.css" type="text/css" />

<!-- HTML5 Shiv and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

<!-- MODERNIZER -->
<script src="assets/js/modernizr.min.js"></script>

</head>

<body class="fixed-left close-it">
<!-- Begin page -->
<div id="wrapper">
	<!-- Top Bar Start -->
	<div class="topbar">
		<!-- LOGO -->
		<div class="topbar-left">
			<a href="javascript:void(0)" class="logo d-logo hidden-xs hidden-sm">
			</a> 
			<a href="javascript:void(0)" class="logo d-logo hidden visible-xs visible-sm">
				<img src="assets/images/m-logo.png" alt="SmartBox" class="img-responsive hidden-xs" height="0">
			</a> 
			<!-- Image Logo here --> 
		</div>
		
		<!-- Button mobile view to collapse sidebar menu -->
		<div class="navbar navbar-default" role="navigation">
			<div class="container">
				<div class="top-fix-navbar">
					<div class="pull-left">
						<button class="button-menu-mobile open-left waves-effect waves-light">
						<i class="fa fa-outdent"></i>
						</button>
						<span class="clearfix"></span>
					</div>
					<ul class="nav navbar-nav hidden-xs">
						<li class="dropdown">
							<a href="javascript:void(0)" class="dropdown-toggle waves-effect waves-light" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user"></i></a>
							<ul class="dropdown-menu">
								<li><a href="javascript:void(0)"><i class="ti-user m-r-10 text-custom"></i> Profile</a>
								</li>
								<li><a href="javascript:void(0)"><i class="ti-settings m-r-10 text-custom"></i> Settings</a>
								</li>
								<li><a href="javascript:void(0)"><i class="ti-lock m-r-10 text-custom"></i> Lock screen</a>
								</li>
								<li class="divider"></li>
								<li><a href="javascript:void(0)"><i class="ti-power-off m-r-10 text-danger"></i> Logout</a>
								</li>
							</ul>
						</li>
						<li class="dropdown">
							<a href="javascript:void(0)" class="dropdown-toggle waves-effect waves-light" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Mega<span
								class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a href="javascript:void(0)">Action</a>
								</li>
								<li><a href="javascript:void(0)">Another action</a>
								</li>
								<li><a href="javascript:void(0)">Something else here</a>
								</li>
								<li><a href="javascript:void(0)">Separated link</a>
								</li>
							</ul>
						</li>
						<li class="dropdown">
							<a href="javascript:void(0)" class="dropdown-toggle waves-effect waves-light" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">New<span
								class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a href="javascript:void(0)">New Theme</a>
								</li>
								<li><a href="javascript:void(0)">New Update</a>
								</li>
								<li><a href="javascript:void(0)">New World</a>
								</li>
							</ul>
						</li>
					</ul>
					<form role="search" class="navbar-left app-search pull-left hidden-xs">
						<input type="text" placeholder="Search project..." class="form-control">
						<a href="javascript:void(0)"><i class="fa fa-search"></i></a>
					</form>
					<ul class="nav navbar-nav navbar-right pull-right">
						<li class="dropdown hidden-xs">
							<a href="javascript:void(0)" class="dropdown-toggle waves-effect waves-light" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">English<span
								class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a href="javascript:void(0)">French</a>
								</li>
								<li><a href="javascript:void(0)">Russian</a>
								</li>
							</ul>
						</li>
						<li class="dropdown top-menu-item-xs">
							<a href="javascript:void(0)" data-target="#" class="dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="true">
							<i class="fa fa-calendar"></i> <span class="badge badge-xs badge-danger">5</span>
							</a>
							<ul class="dropdown-menu dropdown-menu-lg">
								<li class="notifi-title"><span class="label label-default pull-right">New 3</span>Notification</li>
								<li class="list-group slimscroll-noti notification-list">
									<!-- list item-->
									<a href="javascript:void(0);" class="list-group-item">
										<div class="media">
											<div class="pull-left p-r-10">
												<em class="fa fa-diamond noti-primary"></em>
											</div>
											<div class="media-body">
												<h5 class="media-heading">A new order has been placed A new order has been placed</h5>
												<p class="m-0">
													<small>There are new settings available</small>
												</p>
											</div>
										</div>
									</a>
									<!-- list item-->
									<a href="javascript:void(0);" class="list-group-item">
										<div class="media">
											<div class="pull-left p-r-10">
												<em class="fa fa-cog noti-warning"></em>
											</div>
											<div class="media-body">
												<h5 class="media-heading">New settings</h5>
												<p class="m-0">
													<small>There are new settings available</small>
												</p>
											</div>
										</div>
									</a>
									<!-- list item-->
									<a href="javascript:void(0);" class="list-group-item">
										<div class="media">
											<div class="pull-left p-r-10">
												<em class="fa fa-bell-o noti-custom"></em>
											</div>
											<div class="media-body">
												<h5 class="media-heading">Updates</h5>
												<p class="m-0">
													<small>There are <span class="text-primary font-600">2</span> new updates available</small>
												</p>
											</div>
										</div>
									</a>
									<!-- list item-->
									<a href="javascript:void(0);" class="list-group-item">
										<div class="media">
											<div class="pull-left p-r-10">
												<em class="fa fa-user-plus noti-pink"></em>
											</div>
											<div class="media-body">
												<h5 class="media-heading">New user registered</h5>
												<p class="m-0">
													<small>You have 10 unread messages</small>
												</p>
											</div>
										</div>
									</a>
									<!-- list item-->
									<a href="javascript:void(0);" class="list-group-item">
										<div class="media">
											<div class="pull-left p-r-10">
												<em class="fa fa-diamond noti-primary"></em>
											</div>
											<div class="media-body">
												<h5 class="media-heading">A new order has been placed A new order has been placed</h5>
												<p class="m-0">
													<small>There are new settings available</small>
												</p>
											</div>
										</div>
									</a>
									<!-- list item-->
									<a href="javascript:void(0);" class="list-group-item">
										<div class="media">
											<div class="pull-left p-r-10">
												<em class="fa fa-cog noti-warning"></em>
											</div>
											<div class="media-body">
												<h5 class="media-heading">New settings</h5>
												<p class="m-0">
													<small>There are new settings available</small>
												</p>
											</div>
										</div>
									</a>
								</li>
								<li>
									<a href="javascript:void(0);" class="list-group-item text-right">
									<small class="font-600">See all notifications</small>
									</a>
								</li>
							</ul>
						</li>
						<li class="dropdown top-menu-item-xs">
							<a href="javascript:void(0)" data-target="#" class="dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="true">
							<i class="fa fa-bell-o"></i> <span class="badge badge-xs badge-danger">3</span>
							</a>
							<ul class="dropdown-menu dropdown-menu-lg">
								<li class="notifi-title"><span class="label label-default pull-right">New 3</span>Notification</li>
								<li class="list-group slimscroll-noti notification-list">
									<!-- list item-->
									<a href="javascript:void(0);" class="list-group-item">
										<div class="media">
											<div class="pull-left p-r-10">
												<em class="fa fa-diamond noti-primary"></em>
											</div>
											<div class="media-body">
												<h5 class="media-heading">A new order has been placed A new order has been placed</h5>
												<p class="m-0">
													<small>There are new settings available</small>
												</p>
											</div>
										</div>
									</a>
									<!-- list item-->
									<a href="javascript:void(0);" class="list-group-item">
										<div class="media">
											<div class="pull-left p-r-10">
												<em class="fa fa-cog noti-warning"></em>
											</div>
											<div class="media-body">
												<h5 class="media-heading">New settings</h5>
												<p class="m-0">
													<small>There are new settings available</small>
												</p>
											</div>
										</div>
									</a>
									<!-- list item-->
									<a href="javascript:void(0);" class="list-group-item">
										<div class="media">
											<div class="pull-left p-r-10">
												<em class="fa fa-bell-o noti-custom"></em>
											</div>
											<div class="media-body">
												<h5 class="media-heading">Updates</h5>
												<p class="m-0">
													<small>There are <span class="text-primary font-600">2</span> new updates available</small>
												</p>
											</div>
										</div>
									</a>
									<!-- list item-->
									<a href="javascript:void(0);" class="list-group-item">
										<div class="media">
											<div class="pull-left p-r-10">
												<em class="fa fa-user-plus noti-pink"></em>
											</div>
											<div class="media-body">
												<h5 class="media-heading">New user registered</h5>
												<p class="m-0">
													<small>You have 10 unread messages</small>
												</p>
											</div>
										</div>
									</a>
									<!-- list item-->
									<a href="javascript:void(0);" class="list-group-item">
										<div class="media">
											<div class="pull-left p-r-10">
												<em class="fa fa-diamond noti-primary"></em>
											</div>
											<div class="media-body">
												<h5 class="media-heading">A new order has been placed A new order has been placed</h5>
												<p class="m-0">
													<small>There are new settings available</small>
												</p>
											</div>
										</div>
									</a>
									<!-- list item-->
									<a href="javascript:void(0);" class="list-group-item">
										<div class="media">
											<div class="pull-left p-r-10">
												<em class="fa fa-cog noti-warning"></em>
											</div>
											<div class="media-body">
												<h5 class="media-heading">New settings</h5>
												<p class="m-0">
													<small>There are new settings available</small>
												</p>
											</div>
										</div>
									</a>
								</li>
								<li>
									<a href="javascript:void(0);" class="list-group-item text-right">
									<small class="font-600">See all notifications</small>
									</a>
								</li>
							</ul>
						</li>
						<li class="dropdown top-menu-item-xs">
							<a href="javascript:void(0)" class="right-bar-toggle profile waves-effect waves-light"><span class="user-name">Hoang.Thai</span>
							<span class="caret"></span>
							<img src="assets/images/users/avatar-1.jpg" alt="user-img" class="img-circle"> 
							</a>
						</li>
					</ul>
				</div>
				<!--/.nav-collapse -->
			</div>
		</div>
	</div>
	<!-- Top Bar End -->
	
	<!-- ========== Left Sidebar Start ========== -->
	<div class="left side-menu">
		<div class="sidebar-inner slimscrollleft">
			<!--- Divider -->
			<div id="sidebar-menu">
				<ul>
					<li class="menu-title">Navigation</li>
					<li class="has_sub">
						<a href="javascript:void(0);" class="waves-effect"> <i class="fa fa-dashboard"></i> <span> Dashboard </span> <span class="label label-success pull-right">1</span> <span class="fa fa-angle-right cb-nav-arrow"></span> </a>
						<ul class="list-unstyled">
							<li><a href="dashboard.html">Dashboard1</a> </li>
						</ul>
					</li>
					<li> <a href="mailbox.html" class="waves-effect"> <i class="fa fa-envelope"></i> <span> Mailbox </span> </a> </li>
					<li> <a href="calendar.html" class="waves-effect"> <i class="fa fa-calendar"></i> <span> Calendar </span> </a> </li>
					<li class="has_sub">
						<a href="javascript:void(0);" class="waves-effect subdrop"> <i class="fa fa-file"></i> <span> Pages </span> <span class="label label-warning pull-right">3</span> <span class="fa fa-angle-right cb-nav-arrow"></span> </a>
						<ul class="list-unstyled block">
							<li><a href="404.html">404</a> </li>
							<li><a href="blank.html">Blank</a> </li>
							<li><a href="buttons.html">Buttons</a> </li>
						</ul>
					</li>
					
					<li> <a href="profile.html" class="waves-effect"> <i class="fa fa-user"></i> <span> Profile</span> </a> </li>
					
				 
					<li class="text-muted menu-title">Component</li>
				 
					<li class="has_sub">
						<a href="javascript:void(0);" class="waves-effect"> <i class="fa fa-tasks"></i> <span> Forms </span>  <span class="label label-warning pull-right">3</span> <span class="fa fa-angle-right cb-nav-arrow"></span> </a>
						<ul class="list-unstyled">
							<li><a href="form-elements.html">Form Elements</a> </li>
							<li><a href="login.html"> Login</a> </li>
							<li><a href="login2.html"> login2</a> </li>
						</ul>
					</li>
					<li class="has_sub">
						<a href="javascript:void(0);" class="waves-effect"> <i class="fa fa-table"></i> <span> Tabels </span> <span class="fa fa-angle-right cb-nav-arrow"></span> </a>
						<ul class="list-unstyled">
							<li><a href="tables.html">Tabel 1</a> </li>
						</ul>
					</li>
					<li class="has_sub">
						<a href="javascript:void(0);" class="waves-effect"> <i class="fa fa-area-chart"></i> <span> Charts </span> <span class="fa fa-angle-right cb-nav-arrow"></span> </a>
						<ul class="list-unstyled">
							<li><a href="chart.html">Charts 1</a> </li>
						</ul>
					</li>
					 
				</ul>
				<div class="clearfix"></div>
			</div>
			<div class="clearfix"></div>
			<div class="data-points col-md-12">
				<div class="title-text text-left m-b-20">Data Points</div>
				<p class="font-400">Milestone <span class="text-primary pull-right">80%</span> </p>
				<div class="progress m-b-30">
					<div class="progress-bar progress-bar-primary progress-animated wow animated progress-80" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"> </div>
					<!-- /.progress-bar .progress-bar-danger --> 
				</div>
				<!-- /.progress .no-rounded -->
				<p class="font-400">Release <span class="text-pink pull-right">50%</span> </p>
				<div class="progress m-b-20">
					<div class="progress-bar progress-bar-pink progress-animated wow animated progress-50" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"> </div>
					<!-- /.progress-bar .progress-bar-pink --> 
				</div>
				<!-- /.progress .no-rounded --> 
			</div>
		</div>
	</div>
	<!-- Left Sidebar End --> 
	
 
	
	<!-- ============================================================== -->
	<!-- Start right Content here -->
	<!-- ============================================================== -->
	<div class="content-page">
		<!-- Start content -->
		<div class="content">
			<!-- Page-Title -->
			<div class="page-title-group">
				<h4 class="page-title">Chart</h4>
				<h5 class="text-muted page-title-alt">Sub Title</h5>
			</div>
			<div class="cb-page-content">
				<div class="container">
					<div class="row">
						<div class="col-lg-12">
							<div class="row">
								<div class="col-lg-6">
									<div class="card-box">
										<div class="card-box-head">
											<h4 class="header-title m-t-0 pull-left">Analysis</h4>
											<div class="dropdown pull-right">
												<a href="javascript:void(0)" class="dropdown-toggle waves-effect waves-light text-dark" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Last 24 Hours<span class="caret"></span></a>
												<ul class="dropdown-menu whitebg">
													<li><a href="javascript:void(0)"><i class="ti-user m-r-10 text-custom"></i> Last 24 Hours</a>
													</li>
													<li><a href="javascript:void(0)"><i class="ti-settings m-r-10 text-custom"></i> Last 24 Hours</a>
													</li>
													<li><a href="javascript:void(0)"><i class="ti-lock m-r-10 text-custom"></i> Last 24 Hours</a>
													</li>
												</ul>
											</div>
										</div>
										<div class="card-box-content">
											<div class="row">
												<div class="col-md-8 col-sm-6">
													<div id="morris-donut-example" class="bar-280"></div>
												</div>
												<div class="col-md-4 col-sm-6">
													<ul class="list-inline chart-detail-list">
														<li>
															<h5><i class="fa fa-circle m-r-5 color-1"></i>United States</h5>
														</li>
														<li>
															<h5><i class="fa fa-circle m-r-5 color-2"></i>Russia</h5>
														</li>
														<li>
															<h5><i class="fa fa-circle m-r-5 color-3"></i>Itly</h5>
														</li>
														<li>
															<h5><i class="fa fa-circle m-r-5 color-4"></i>Germany</h5>
														</li>
														<li>
															<h5><i class="fa fa-circle m-r-5 color-5"></i>Other</h5>
														</li>
													</ul>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="col-lg-6">
									<div class="card-box">
										<div class="card-box-head">
											<h4 class="header-title m-t-0 pull-left">Statistics</h4>
											<div class="pull-right">
												<ul class="nav nav nav-pills cb-rounded-nav">
													<li class="active"><a href="javascript:void(0)">Week</a></li>
													<li><a href="javascript:void(0)">Month</a></li>
													<li><a href="javascript:void(0)">Year</a></li>
												</ul>
											</div>
										</div>
										<div class="card-box-content">
											<div id="morris-area-example" class="bar-215"></div>
											<div class="cb-area-chart-des">
												<div class="row">
													<div class="col-xs-3">
														<div class="area-chart-count">3,438</div>
														<div class="area-chart-text">Orders</div>
													</div>
													<div class="col-xs-3">
														<div class="area-chart-count">10,232</div>
														<div class="area-chart-text">Sellings</div>
													</div>
													<div class="col-xs-3">
														<div class="area-chart-count">21,550</div>
														<div class="area-chart-text">Items</div>
													</div>
													<div class="col-xs-3">
														<div class="area-chart-count">5,118</div>
														<div class="area-chart-text">Customers</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- end row -->
							<div class="row">
								<div class="col-lg-6">
									<div class="card-box">
										<div class="card-box-head">
											<h4 class="header-title m-t-0 pull-left">Multiple Statistics</h4>
											<div class="pull-right">
											</div>
										</div>
										<div class="card-box-content">
											<div id="area-chart" class="bar-280"></div>
										</div>
									</div>
								</div>
								<div class="col-lg-6">
									<div class="card-box">
										<div class="card-box-head">
											<h4 class="header-title m-t-0 pull-left">Realtime Statistics</h4>
										</div>
										<div class="card-box-content">
											<div id="placeholder" class="placeholder_1"></div>
										</div>
									</div>
								</div>
							</div>
							<!-- end row -->
							<div class="row">
								<div class="col-lg-6">
									<div class="card-box">
										<div class="card-box-head">
											<h4 class="header-title m-t-0 pull-left">Line Chart</h4>
											<div class="pull-right">
											</div>
										</div>
										<div class="card-box-content">
											<div id="line-chart" class="bar-280"></div>
										</div>
									</div>
								</div>
								<div class="col-lg-6">
									<div class="card-box">
										<div class="card-box-head">
											<h4 class="header-title m-t-0 pull-left">Bar Chart</h4>
										</div>
										<div class="card-box-content">
											<div id="bar-chart" class="bar-280"></div>
										</div>
									</div>
								</div>
							</div>
							<!-- end row -->
							<div class="row">
								<div class="col-lg-6">
									<div class="card-box">
										<div class="card-box-head">
											<h4 class="header-title m-t-0 pull-left">Stacked Chart</h4>
											<div class="pull-right">
											</div>
										</div>
										<div class="card-box-content">
											<div id="stacked" class="bar-280"></div>
										</div>
									</div>
								</div>
								 
							</div>
							<!-- end row -->

							<div class="row">
								<div class="col-lg-6">
									<div class="card-box">
										<div class="card-box-head">
											<h4 class="header-title m-t-0 pull-left">Pie Chart</h4>
											<div class="pull-right">
											</div>
										</div>
										<div class="card-box-content">
											<div id="pie-chart-data" class="bar-280"></div>
											
										</div>
									</div>
								</div>
								<div class="col-lg-6">
									<div class="card-box">
										<div class="card-box-head">
											<h4 class="header-title m-t-0 pull-left">Dual Stacked</h4>
										</div>
										<div class="card-box-content">
											<div class="horizontal_chart">
												<div id="dual-stack-data" class="bar-280"></div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- end row -->								
							
							
						</div>
					</div>
					<!-- end row -->
				</div>
			</div>
			<!-- container -->
		</div>
		<!-- content -->
		<footer class="footer text-right">
			&copy; 2017. All rights reserved.
		</footer>
	</div>
	
	<!-- ============================================================== -->
	<!-- End Right content here -->
	<!-- ============================================================== -->
<!-- Right Sidebar -->
	<div class="side-bar right-bar">
		<div class="slimscrollleft">
			<!-- Cotact list -->
			<div class="contact-list">
				<div class="contact-list-link">
					<ul class="nav nav-tabs tabs">
						<li class="active tab">
							<a href="#cl-tab1" data-toggle="tab" aria-expanded="false">
							<i class="fa fa-users"></i>
							</a>
						</li>
						<li class="tab">
							<a href="#cl-tab2" data-toggle="tab" aria-expanded="false">
							<i class="fa fa-comments"></i>
							</a>
						</li>
						<li class="tab">
							<a href="#cl-tab3" data-toggle="tab" aria-expanded="false">
							<i class="fa fa-gear"></i>
							</a>
						</li>
					</ul>
				</div>
				<div class="tab-content">
					<!-- Active Contact -->
					<div class="tab-pane active" id="cl-tab1">
						<h4 class="text-center">Who to follow</h4>
						<ul class="list-group contacts-list">
							<li class="list-group-item">
								<a href="javascript:void(0)">
									<div class="thumb-box">
										<i class="fa fa-circle danger"></i>
										<img src="assets/images/users/avatar-1.jpg" alt="">
									</div>
									<div class="info-box">
										<span class="info-name">Amelia Nelson</span>
										<span class="info-prof">UI Graphic</span>
									</div>
								</a>
								<span class="clearfix"></span>
							</li>
							<li class="list-group-item">
								<a href="javascript:void(0)">
									<div class="thumb-box">
										<i class="fa fa-circle online"></i>
										<img src="assets/images/users/avatar-2.jpg" alt="">
									</div>
									<div class="info-box">
										<span class="info-name">Alyssa Molligan</span>
										<span class="info-prof">Art director, Movie Cut</span>
									</div>
								</a>
								<span class="clearfix"></span>
							</li>
							<li class="list-group-item">
								<a href="javascript:void(0)">
									<div class="thumb-box">
										<i class="fa fa-circle online"></i>
										<img src="assets/images/users/avatar-3.jpg" alt="">
									</div>
									<div class="info-box">
										<span class="info-name">Kaitlyn Eddington</span>
										<span class="info-prof">Writter, Mag Editor</span>
									</div>
								</a>
								<span class="clearfix"></span>
							</li>
							<li class="list-group-item">
								<a href="javascript:void(0)">
									<div class="thumb-box">
										<i class="fa fa-circle danger"></i>
										<img src="assets/images/users/avatar-1.jpg" alt="">
									</div>
									<div class="info-box">
										<span class="info-name">Amelia Nelson</span>
										<span class="info-prof">UI Graphic</span>
									</div>
								</a>
								<span class="clearfix"></span>
							</li>
							<li class="list-group-item">
								<a href="javascript:void(0)">
									<div class="thumb-box">
										<i class="fa fa-circle online"></i>
										<img src="assets/images/users/avatar-2.jpg" alt="">
									</div>
									<div class="info-box">
										<span class="info-name">Alyssa Molligan</span>
										<span class="info-prof">Art director, Movie Cut</span>
									</div>
								</a>
								<span class="clearfix"></span>
							</li>
							<li class="list-group-item">
								<a href="javascript:void(0)">
									<div class="thumb-box">
										<i class="fa fa-circle online"></i>
										<img src="assets/images/users/avatar-3.jpg" alt="">
									</div>
									<div class="info-box">
										<span class="info-name">Kaitlyn Eddington</span>
										<span class="info-prof">Writter, Mag Editor</span>
									</div>
								</a>
								<span class="clearfix"></span>
							</li>
							<li class="list-group-item">
								<a href="javascript:void(0)">
									<div class="thumb-box">
										<i class="fa fa-circle danger"></i>
										<img src="assets/images/users/avatar-1.jpg" alt="">
									</div>
									<div class="info-box">
										<span class="info-name">Amelia Nelson</span>
										<span class="info-prof">UI Graphic</span>
									</div>
								</a>
								<span class="clearfix"></span>
							</li>
							<li class="list-group-item">
								<a href="javascript:void(0)">
									<div class="thumb-box">
										<i class="fa fa-circle online"></i>
										<img src="assets/images/users/avatar-2.jpg" alt="">
									</div>
									<div class="info-box">
										<span class="info-name">Alyssa Molligan</span>
										<span class="info-prof">Art director, Movie Cut</span>
									</div>
								</a>
								<span class="clearfix"></span>
							</li>
							<li class="list-group-item">
								<a href="javascript:void(0)">
									<div class="thumb-box">
										<i class="fa fa-circle online"></i>
										<img src="assets/images/users/avatar-3.jpg" alt="">
									</div>
									<div class="info-box">
										<span class="info-name">Kaitlyn Eddington</span>
										<span class="">Writter, Mag Editor</span>
									</div>
								</a>
								<span class="clearfix"></span>
							</li>
						</ul>
						<div class="text-center"><a href="javascript:void(0)" class="btn btn-primary dropdown-toggle waves-effect m-t-30">More Connections</a>
						</div>
					</div>
					<!-- Active Contact -->
					<div class="tab-pane active" id="cl-tab2">
						<h4 class="text-center">Conversation</h4>
						<ul class="list-group contacts-list">
							<li class="list-group-item">
								<a href="javascript:void(0)">
									<div class="thumb-box">
										<i class="fa fa-circle danger"></i>
										<img src="assets/images/users/avatar-1.jpg" alt="">
									</div>
									<div class="info-box">
										<span class="info-name">Amelia Nelson</span>
										<span class="info-prof">UI Graphic</span>
									</div>
								</a>
								<span class="clearfix"></span>
							</li>
							<li class="list-group-item">
								<a href="javascript:void(0)">
									<div class="thumb-box">
										<i class="fa fa-circle online"></i>
										<img src="assets/images/users/avatar-2.jpg" alt="">
									</div>
									<div class="info-box">
										<span class="info-name">Alyssa Molligan</span>
										<span class="info-prof">Art director, Movie Cut</span>
									</div>
								</a>
								<span class="clearfix"></span>
							</li>
							<li class="list-group-item">
								<a href="javascript:void(0)">
									<div class="thumb-box">
										<i class="fa fa-circle online"></i>
										<img src="assets/images/users/avatar-3.jpg" alt="">
									</div>
									<div class="info-box">
										<span class="info-name">Kaitlyn Eddington</span>
										<span class="info-prof">Writter, Mag Editor</span>
									</div>
								</a>
								<span class="clearfix"></span>
							</li>
							<li class="list-group-item">
								<a href="javascript:void(0)">
									<div class="thumb-box">
										<i class="fa fa-circle danger"></i>
										<img src="assets/images/users/avatar-1.jpg" alt="">
									</div>
									<div class="info-box">
										<span class="info-name">Amelia Nelson</span>
										<span class="info-prof">UI Graphic</span>
									</div>
								</a>
								<span class="clearfix"></span>
							</li>
							<li class="list-group-item">
								<a href="javascript:void(0)">
									<div class="thumb-box">
										<i class="fa fa-circle online"></i>
										<img src="assets/images/users/avatar-2.jpg" alt="">
									</div>
									<div class="info-box">
										<span class="info-name">Alyssa Molligan</span>
										<span class="info-prof">Art director, Movie Cut</span>
									</div>
								</a>
								<span class="clearfix"></span>
							</li>
							<li class="list-group-item">
								<a href="javascript:void(0)">
									<div class="thumb-box">
										<i class="fa fa-circle online"></i>
										<img src="assets/images/users/avatar-3.jpg" alt="">
									</div>
									<div class="info-box">
										<span class="info-name">Kaitlyn Eddington</span>
										<span class="info-prof">Writter, Mag Editor</span>
									</div>
								</a>
								<span class="clearfix"></span>
							</li>
							<li class="list-group-item">
								<a href="javascript:void(0)">
									<div class="thumb-box">
										<i class="fa fa-circle danger"></i>
										<img src="assets/images/users/avatar-1.jpg" alt="">
									</div>
									<div class="info-box">
										<span class="info-name">Amelia Nelson</span>
										<span class="info-prof">UI Graphic</span>
									</div>
								</a>
								<span class="clearfix"></span>
							</li>
							<li class="list-group-item">
								<a href="javascript:void(0)">
									<div class="thumb-box">
										<i class="fa fa-circle online"></i>
										<img src="assets/images/users/avatar-2.jpg" alt="">
									</div>
									<div class="info-box">
										<span class="info-name">Alyssa Molligan</span>
										<span class="info-prof">Art director, Movie Cut</span>
									</div>
								</a>
								<span class="clearfix"></span>
							</li>
							<li class="list-group-item">
								<a href="javascript:void(0)">
									<div class="thumb-box">
										<i class="fa fa-circle online"></i>
										<img src="assets/images/users/avatar-3.jpg" alt="">
									</div>
									<div class="info-box">
										<span class="info-name">Kaitlyn Eddington</span>
										<span class="">Writter, Mag Editor</span>
									</div>
								</a>
								<span class="clearfix"></span>
							</li>
						</ul>
						<div class="text-center"><a href="javascript:void(0)" class="btn btn-primary dropdown-toggle waves-effect m-t-30">More Connections</a>
						</div>
					</div>
					<!-- Active Contact -->
					<div class="tab-pane active" id="cl-tab3">
						<h4 class="text-center">Setting</h4>
						<ul class="list-group contacts-list">
							<li class="list-group-item">
								<a href="javascript:void(0)">
									<div class="thumb-box">
										<i class="fa fa-circle danger"></i>
										<img src="assets/images/users/avatar-1.jpg" alt="">
									</div>
									<div class="info-box">
										<span class="info-name">Amelia Nelson</span>
										<span class="info-prof">UI Graphic</span>
									</div>
								</a>
								<span class="clearfix"></span>
							</li>
							<li class="list-group-item">
								<a href="javascript:void(0)">
									<div class="thumb-box">
										<i class="fa fa-circle online"></i>
										<img src="assets/images/users/avatar-2.jpg" alt="">
									</div>
									<div class="info-box">
										<span class="info-name">Alyssa Molligan</span>
										<span class="info-prof">Art director, Movie Cut</span>
									</div>
								</a>
								<span class="clearfix"></span>
							</li>
							<li class="list-group-item">
								<a href="javascript:void(0)">
									<div class="thumb-box">
										<i class="fa fa-circle online"></i>
										<img src="assets/images/users/avatar-3.jpg" alt="">
									</div>
									<div class="info-box">
										<span class="info-name">Kaitlyn Eddington</span>
										<span class="info-prof">Writter, Mag Editor</span>
									</div>
								</a>
								<span class="clearfix"></span>
							</li>
							<li class="list-group-item">
								<a href="javascript:void(0)">
									<div class="thumb-box">
										<i class="fa fa-circle danger"></i>
										<img src="assets/images/users/avatar-1.jpg" alt="">
									</div>
									<div class="info-box">
										<span class="info-name">Amelia Nelson</span>
										<span class="info-prof">UI Graphic</span>
									</div>
								</a>
								<span class="clearfix"></span>
							</li>
							<li class="list-group-item">
								<a href="javascript:void(0)">
									<div class="thumb-box">
										<i class="fa fa-circle online"></i>
										<img src="assets/images/users/avatar-2.jpg" alt="">
									</div>
									<div class="info-box">
										<span class="info-name">Alyssa Molligan</span>
										<span class="info-prof">Art director, Movie Cut</span>
									</div>
								</a>
								<span class="clearfix"></span>
							</li>
							<li class="list-group-item">
								<a href="javascript:void(0)">
									<div class="thumb-box">
										<i class="fa fa-circle online"></i>
										<img src="assets/images/users/avatar-3.jpg" alt="">
									</div>
									<div class="info-box">
										<span class="info-name">Kaitlyn Eddington</span>
										<span class="info-prof">Writter, Mag Editor</span>
									</div>
								</a>
								<span class="clearfix"></span>
							</li>
							<li class="list-group-item">
								<a href="javascript:void(0)">
									<div class="thumb-box">
										<i class="fa fa-circle danger"></i>
										<img src="assets/images/users/avatar-1.jpg" alt="">
									</div>
									<div class="info-box">
										<span class="info-name">Amelia Nelson</span>
										<span class="info-prof">UI Graphic</span>
									</div>
								</a>
								<span class="clearfix"></span>
							</li>
							<li class="list-group-item">
								<a href="javascript:void(0)">
									<div class="thumb-box">
										<i class="fa fa-circle online"></i>
										<img src="assets/images/users/avatar-2.jpg" alt="">
									</div>
									<div class="info-box">
										<span class="info-name">Alyssa Molligan</span>
										<span class="info-prof">Art director, Movie Cut</span>
									</div>
								</a>
								<span class="clearfix"></span>
							</li>
							<li class="list-group-item">
								<a href="javascript:void(0)">
									<div class="thumb-box">
										<i class="fa fa-circle online"></i>
										<img src="assets/images/users/avatar-3.jpg" alt="">
									</div>
									<div class="info-box">
										<span class="info-name">Kaitlyn Eddington</span>
										<span class="">Writter, Mag Editor</span>
									</div>
								</a>
								<span class="clearfix"></span>
							</li>
						</ul>
						<div class="text-center"><a href="javascript:void(0)" class="btn btn-primary dropdown-toggle waves-effect m-t-30">More Connections</a>
						</div>
					</div>
				</div>
			</div>
			<div class="clear"></div>
			<!-- Todos app -->
			<div class="cb-todo-app">
				<div class="todo-head">
					<h4 class="m-t-50 m-b-0 p-l-20 header-title">
						<b>Todo</b> 
					</h4>
					<small id="todo-message" class="p-l-20">
					<span id="todo-remaining"></span> 
					of <span id="todo-total"></span>
					remaining
					</small>
				</div>
				<div class="todoapp">
					<ul class="list-group no-margn nicescroll todo-list bar-280" id="todo-list"></ul>
					<form name="todo-form" id="todo-form" class="m-t-20">
						<div class="row">
							<div class="col-sm-8 todo-inputbar">
								<input type="text" id="todo-input-text" name="todo-input-text" class="form-control" placeholder="Add new todo">
							</div>
							<div class="col-sm-4 todo-send">
								<button class="btn-primary btn-md btn-block btn waves-effect waves-light" type="button" id="todo-btn-submit">Add</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<!-- end row -->
	<!-- /Right-bar -->
</div>
<!-- END wrapper -->

<!-- Page Loader --> 
<div class="page-loader">
	<a href="#"><img src="assets/images/logo-2.png" class="img-responsive center-block" alt=""/></a>
	<span class="text-uppercase">Loading...</span>
</div>

<!-- SmartBox Js files --> 
<script>
       var resizefunc = [];
</script> 
		
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/pace.min.js"></script>
<script src="assets/js/loader.js"></script>
<script src="assets/js/detect.js"></script>
<script src="assets/js/fastclick.js"></script>
<script src="assets/js/waves.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/jquery.slimscroll.js"></script>
<script src="assets/js/jquery.nicescroll.js"></script>
<script src="assets/js/jquery.scrollTo.min.js"></script>
<script src="assets/pages/jquery.todo.js"></script>


<script>
 

    function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
            ['Galaxy', 'Distance', 'Brightness'],
            ['60', 8000, 23.3],
            ['50', 24000, 4.5],
            ['40', 30000, 14.3],
            ['30', 50000, 0.9],
            ['20', 60000, 13.1]
        ]);


        var options = {

            width: 800,
            colors: ['#86d3ce', '#3993bb'],
            bars: 'horizontal', // Required for Material Bar Charts.
            series: {
                0: {
                    axis: 'distance'
                }, // Bind series 0 to an axis named 'distance'.
                1: {
                    axis: 'brightness'
                } // Bind series 1 to an axis named 'brightness'.
            },

            axes: {
                x: {
                    distance: {
                        label: ''
                    }, // Bottom x-axis.
                    brightness: {
                        side: 'none'
                    } // Top x-axis.
                }
            }
        };

        var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
        chart.draw(data, options);
    };
</script>

<script src="assets/js/jquery.flot.js"></script>
<script src="assets/js/jquery.flot.pie.js"></script>

<script>

$(function() {

		var d1 = [];
		for (var i = 0; i <= 10; i += 1) {
			d1.push([i, parseInt(Math.random() * 30)]);
		}
		d1 = {data: d1, stack: 1, color: '#86d3ce'};

		var d2 = [];
		for (i = 0; i <= 10; i += 1) {
			d2.push([i, parseInt(Math.random() * 30)]);
		}
		d2 = {data: d2, stack: 1, color: '#23649e'};

		var d3 = [];
		for (i = 0; i <= 10; i += 1) {
			d3.push([i, parseInt(Math.random() * 30)]);
		}
		d3 = {data: d3, stack: 1, color: '#3993bb'};
		
		var d4 = [];
		for (i = 0; i <= 10; i += 1) {
			d4.push([i, parseInt(-Math.random() * 30)]);
		}
		d4 = {data: d4, stack: 2, color: '#63daed'};
		
		
		var d5 = [];
		for (i = 0; i <= 10; i += 1) {
			d5.push([i, parseInt(-Math.random() * 30)]);
		}
		d5 = {data: d5, stack: 2, color: '#86d3ce'};

	var stack = 0,
		bars = true,
		lines = false,
		steps = false;

		$.plot("#dual-stack-data", [ d1, d2, d3, d4, d5 ], {
			series: {
				stack: stack,
				lines: {
					show: lines,
					fill: true,
					steps: steps
				},
				
				bars: {
					show: bars,
					barWidth: 0.5
				}
			}
		});

});



</script>

<script>
datapie = [
    {label: "One",  data: 22, color: '#3993bb'},
    {label: "Two",  data: 14, color: '#65b5c2'},
    {label: "Three",  data: 11, color: '#86d3ce'},
    {label: "Four",  data: 30, color: '#23649e'},
    {label: "Five",  data: 23, color: '#63daed'}
];

$.plot($("#pie-chart-data"), datapie, { 
    series: {
         pie: {
             show: true,
             label: {
                 show: true,
                 formatter: function(label,point){
                     return(point.percent.toFixed(0) + '%');
                     
                 }
             }
        }
    },        
    legend: {show: true}
});


</script>


<script>

    window.onresize = function(event) {
        var data = [],
            totalPoints = 300;

        function getRandomData() {

            if (data.length > 0)
                data = data.slice(1);

            // Do a random walk
            while (data.length < totalPoints) {

                var prev = data.length > 0 ? data[data.length - 1] : 50,
                    y = prev + Math.random() * 10 - 5;

                if (y < 0) {
                    y = 0;
                } else if (y > 100) {
                    y = 100;
                }

                data.push(y);
            }

            // Zip the generated y values with the x values
            var res = [];
            for (var i = 0; i < data.length; ++i) {
                res.push([i, data[i]])
            }

            return res;
        }

        // Set up the control widget
        var updateInterval = 30;
        $("#updateInterval").val(updateInterval).change(function() {
            var v = $(this).val();
            if (v && !isNaN(+v)) {
                updateInterval = +v;
                if (updateInterval < 1) {
                    updateInterval = 1;
                } else if (updateInterval > 5000) {
                    updateInterval = 5000;
                }
                $(this).val("" + updateInterval);
            }
        });

        var plot = $.plot("#placeholder", [getRandomData()], {
            series: {
                lines: {
                    show: true,
                    fill: true
                },
                shadowSize: 0
            },
            yaxis: {
                min: 0,
                max: 100,
                ticks: 10
            },
            xaxis: {
                show: false
            },
            grid: {
                hoverable: true,
                clickable: true,
                tickColor: "#f9f9f9",
                borderWidth: 1,
                borderColor: "#eeeeee"
            },
            colors: ["#50c9d1"]
        });

        function update() {

            plot.setData([getRandomData()]);

            // Since the axes don't change, we don't need to call plot.setupGrid()

            plot.draw();
            setTimeout(update, updateInterval);
        }

        update();

    }
</script>

<script src="assets/plugins/moment/moment.js"></script>
<script src="assets/plugins/morris/morris.min.js"></script>
<script src="assets/plugins/raphael/raphael-min.js"></script>
<script src="assets/plugins/jquery-sparkline/jquery.sparkline.min.js"></script>
<script src="assets/pages/jquery.charts-sparkline.js"></script>
<script src="assets/js/jquery.app.js"></script>
<script src="assets/js/cb-chart.js"></script>
<script>
    $(function() {

        var data = [{
                y: '2014',
                a: 50,
                b: 90
            }, {
                y: '2015',
                a: 65,
                b: 75
            }, {
                y: '2017',
                a: 50,
                b: 50
            }, {
                y: '2017',
                a: 75,
                b: 60
            }, {
                y: '2018',
                a: 80,
                b: 65
            }, {
                y: '2019',
                a: 90,
                b: 70
            }, {
                y: '2020',
                a: 100,
                b: 75
            }, {
                y: '2021',
                a: 115,
                b: 75
            }, {
                y: '2022',
                a: 120,
                b: 85
            }, {
                y: '2023',
                a: 145,
                b: 85
            }, {
                y: '2024',
                a: 160,
                b: 95
            }],
            config = {
                data: data,
                xkey: 'y',
                ykeys: ['a', 'b'],
                labels: ['Total Income', 'Total Outcome'],
                fillOpacity: 0.6,
                hideHover: 'auto',
                behaveLikeLine: true,
                resize: true,
                pointFillColors: ['#ffffff'],
                pointStrokeColors: ['#60ced5', '#ee2337'],
                lineColors: ['#60ced5', '#ee2337']
            };

        config2 = {
            data: data,
            xkey: 'y',
            ykeys: ['a', 'b'],
            labels: ['Total Income', 'Total Outcome'],
            fillOpacity: 0.6,
            hideHover: 'auto',
            behaveLikeLine: true,
            resize: true,
            pointFillColors: ['#ffffff'],
            pointStrokeColors: ['#60ced5', '#36aab1'],
            lineColors: ['#60ced5', '#36aab1']
        };

        config2.element = 'area-chart';
        Morris.Area(config2);
        config.element = 'line-chart';
        Morris.Line(config);
        config.element = 'stacked';
        config.stacked = true;
        config.barColors = ['#3993bb', '#b2f7f3'];
        Morris.Bar(config);
        Morris.Bar({
            element: 'bar-chart',
            resize: true,
            data: [{
                    y: '2006',
                    a: 100,
                    b: 90
                },
                {
                    y: '2007',
                    a: 75,
                    b: 65
                },
                {
                    y: '2008',
                    a: 50,
                    b: 40
                },
                {
                    y: '2009',
                    a: 75,
                    b: 65
                },
                {
                    y: '2010',
                    a: 50,
                    b: 40
                },
                {
                    y: '2011',
                    a: 75,
                    b: 65
                },
                {
                    y: '2012',
                    a: 100,
                    b: 90
                },
                {
                    y: '2013',
                    a: 65,
                    b: 80
                }

            ],
            xkey: 'y',
            ykeys: ['a', 'b'],
            labels: ['Series A', 'Series B'],
            barColors: ['#86d3ce', '#3993bb']
        });

        $(window).resize(function() {
            window.m.redraw();
        });

    });
</script> 
    
</body>
</html>